<template>
    <lib-doc :libDocData="libDocData"></lib-doc>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
export default defineComponent({
    name: 'i_search_demo',
    setup () {
        const libDocData: LibDocInterface = {
            title: '搜索条件',
            docList: [
                {
                    label: '引入组件',
                    value: `
                      import { ISeniorSearch } from 'wd-platform-library'
                      import { SeniorSearchInterFace } from 'wd-platform-library'`
                },
                {
                    label: '创建搜索条件对象',
                    type: 'pre',
                    value: `
const seniorSearchOption = ref<SeniorSearchInterFace<any, any>>({
            onSubmit: () => {
                alert('点击搜索')
                console.log(seniorSearchOption.value.basicForm.form, seniorSearchOption.value.seniorForm?.form)
            },
            basicForm: {
                labelWidth: 70, // 文本宽度
                form: {
                    moreSearch: '',
                    menu: [],
                    examYear: null
                },
                fieldDataList: [
                    {
                        labelCol: { style: { width: '35px' } },
                        width: 6,
                        type: 'input', // form表单类型
                        label: '搜索', // 字段描述信息
                        placeholder: '姓名/手机号/微信/QQ',
                        field: 'moreSearch' // form 对应字段
                    },
                    {
                        width: 6,
                        type: 'cascader', // form表单类型
                        label: '菜单', // 字段描述信息
                        field: 'menu', // form 对应字段
                        options: { fieldNames: { label: 'menuName', value: 'id' } },
                        // options: { fieldNames: { label: 'clueName', value: 'levelCode' } },
                        dataList: dataList
                    },
                    {
                        width: 6,
                        type: 'select', // form表单类型
                        label: '考试年份', // 字段描述信息
                        field: 'examYear', // form 对应字段
                        dataList: [
                            { label: '2000', value: '2000' },
                            { label: '2001', value: '2001' },
                            { label: '2002', value: '2002' }
                        ]
                    }
                ]
            },
            seniorForm: {
                labelWidth: 80, // 文本宽度
                form: {
                    phoneProvince: '',
                    enterYear: null, // 入学年份
                    sex: null, // 性别
                    nowSchoolId: null, // 就读院校
                    lastFollowTime: [] // 最后跟进时间   // lastStartTime  lastEndTime
                },
                fieldDataList: [
                    {
                        labelCol: { style: { width: '100px' } },
                        width: 8,
                        type: 'input', // form表单类型
                        label: '手机号归属地', // 字段描述信息
                        field: 'phoneProvince' // form 对应字段
                    },
                    {
                        width: 8,
                        type: 'select', // form表单类型
                        label: '入学年份', // 字段描述信息
                        field: 'enterYear', // form 对应字段
                        dataList: [
                            { label: '2000', value: '2000' },
                            { label: '2001', value: '2001' },
                            { label: '2002', value: '2002' }
                        ]
                    },
                    {
                        width: 8,
                        type: 'select', // form表单类型
                        label: '性别', // 字段描述信息
                        field: 'sex', // form 对应字段
                        dataList: [
                            { label: '男', value: '0' },
                            { label: '女', value: '1' }
                        ]
                    },
                    {
                        width: 8,
                        type: 'select', // form表单类型
                        label: '就读院校 ', // 字段描述信息
                        field: 'nowSchoolId', // form 对应字段
                        dataList: [
                            { label: '清华', value: 'qh' },
                            { label: '北大', value: 'bd' }
                        ],
                        callback: async function (data: any, fieldDataItem: FieldListInterFace, formData: FormInterFace<any>) {
                            alert('选择院校回调')
                        }
                    },
                    {
                        width: 8,
                        labelCol: { style: { width: '100px' } },
                        type: 'rangePicker', // form表单类型
                        label: '最后跟进时间', // 字段描述信息
                        field: 'lastFollowTime' // form 对应字段
                    }
                ]
            }
        })`
                },
                {
                    label: 'eniorSearchOption对象说明',
                    type: 'pre',
                    value: `
    //点击搜索后回调
    onSubmit: () => {
                alert('点击搜索')
                console.log(seniorSearchOption.value.basicForm.form, seniorSearchOption.value.seniorForm?.form)
    },
    //基本搜索
    basicForm: {
        labelWidth: 70, // 文本宽度
        form:{},  //取值字段
        fieldDataList: []  搜索项每条配置
    },
    //弹框内部搜索
    seniorForm: {
        labelWidth: 70, // 文本宽度
        form:{},  //取值字段
        fieldDataList: []  搜索项每条配置
    },
     `
                },
                {
                    label: 'fieldDataList配置',
                    type: 'pre',
                    value: `
    //type类型:
        //input  输入框
        //inputNumber 数字输入框
        //textarea   多行文本框
        //checkbox   复选框
        //radio      单选框
        //select     下拉菜单
        //rangePicker 时间选择器
        //datePicker  时间选择器
        //cascader    多级下拉菜单
        //treeSelect  树形下拉菜单
        //checkBoxSelect 下拉复选框
    {
        labelWidth: 70, // 提示文本宽度
        type: 'input', // form表单类型
        label: '姓名', // 提示文本
        field: 'name', // form 对应字段
        dataList?:[], // type为下拉框,复选框,单选框,多级下拉菜单,树形下拉框,下拉复选框时配置该字段
        callback: (data: any) => { //选择后执行方法
            alert(data)
        },
    },`
                },
                {
                    label: '打开高级搜索回调',
                    type: 'pre',
                    value: `
    clickSeniorFun`
                }
            ]
        }
        return {
            libDocData
        }
    },
    methods: {},
    components: { LibDoc }
})
</script>
